import ButtonAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Button.Atom/enum";
import ButtonMolecule from "@/user.InterfaceLayer/Libraries/UI_KIT/Molecules/Button.molecule";
import FormInput from "@/user.InterfaceLayer/Libraries/UI_KIT/Molecules/FormInput.molecule";
import OrderStoriesWidget from "@/user.InterfaceLayer/Libraries/Widgets/OrderStories.widget";
import { resources } from "@/user.InterfaceLayer/constants/const";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import React, { useState } from "react";

interface ProfilePageProps {}

const ProfilePage: React.FC<ProfilePageProps> = () => {
  const [selected, setSelected] = useState("Мои заказы");
  const handleSelect = (title: string) => {
    setSelected(title);
  };

  return (
    <div
      className={`${globalContainer} flex justify-between items-start py-14`}
    >
      <div className="w-[200px] flex flex-col gap-4">
        <ButtonMolecule
          items={resources.profilePage.catalog}
          selected={selected}
          onClick={handleSelect}
        />
      </div>
      <div className="bg-bgGen w-[760px] inline-block p-6 flex flex-col gap-4">
        {selected === "Личные данные" && (
          <>
            <h3 className="text-h3 font-bold text-textColor">Личные данные</h3>
            {resources.PlacingOrder.PersonalData.map((e, index) => (
              <FormInput key={index} type={e.type} placeholder={e.placeholder}>
                <ButtonAtom
                  className="max-w-[100px]"
                  type={ButtonAtomEnum.enum_butButton}
                >
                  Изменить
                </ButtonAtom>
              </FormInput>
            ))}
          </>
        )}
        {selected === "Мои заказы" && <OrderStoriesWidget />}
      </div>
    </div>
  );
};
export default ProfilePage;
